<template>
    <div style="height: 100%;">
        <div style="height: 100%;">
            <tableGrid :table-grid-config="tableGridConfig" />
        </div>
        <!-- <div style="height: 50%;">
            <tableGrid :table-grid-config="tableGridConfig1" />
        </div> -->
    </div>
</template>

<script lang='ts' setup name=''>
import tableGrid from "/@/components/tableGrid/index.vue";

const fieldsConfig: Array<fieldConfig> = [
    {
        fieldName: '测试number',
        fieldCode: "number",
        fieldType: "ElInput",
        fieldContentType: 'number',
        isQueryCondition: true
    },
    {
        fieldName: '测试float',
        fieldCode: "float",
        fieldType: "ElInput",
        fieldContentType: 'float'
    },
    {
        fieldName: '测试integer',
        fieldCode: "integer",
        fieldType: "ElInput",
        fieldContentType: 'integer'
    },
    {
        fieldName: '测试ElInput',
        fieldCode: "name",
        fieldType: "ElInput",
        isQueryCondition: true,
        isRequired: true
    },
    {
        fieldName: '测试ElInputPattern',
        fieldWidth: 200,
        fieldCode: "name1",
        fieldType: "ElInput",
        fieldPattern: /^[a-zA-Z0-9_-]{4,16}$/,
        isQueryCondition: true,
        fieldRuleDescription: '以四个字母或数字开头，且长度不超过16'
    },
    {
        fieldName: '测试ElSwitch',
        fieldCode: "switch",
        fieldType: "ElSwitch",
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElSelect',
        fieldCode: "select",
        fieldType: "ElSelect",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'select_DESC',
        isShowInTable: false,
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElCheckbox',
        fieldWidth: 200,
        fieldCode: "checkboxGroup",
        fieldType: "ElCheckboxGroup",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'checkboxGroup_DESC',
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElRadioGroup',
        fieldWidth: 200,
        fieldCode: "radioGroup",
        fieldType: "ElRadioGroup",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'radioGroup_DESC',
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElDatePicker',
        fieldCode: "datePicker",
        fieldType: "ElDatePicker",
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElDateTimePicker',
        fieldWidth: 230,
        fieldCode: "dateTimePicker",
        fieldType: "ElDateTimePicker",
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElTextarea',
        fieldWidth: 260,
        fieldCode: "textarea",
        fieldType: "ElTextarea"
    },
    {
        fieldName: '测试ElColorPicker',
        fieldCode: "color",
        fieldType: "ElColorPicker"
    },
    {
        fieldName: '测试ElUpload',
        fieldWidth: 120,
        fieldCode: "file",
        fieldType: "ElUpload",
        uploadAllowFile: '*',
        isShowInTable: false
    },
    {
        fieldName: '测试ElImgList',
        fieldCode: "imgList",
        fieldType: "ElImgList",
        isShowInTable: false
    },
    {
        fieldName: '测试ElUpload1',
        fieldWidth: 120,
        fieldCode: "file1",
        fieldType: "ElUpload",
        uploadAllowFile: '*',
        isShowInTable: false
    },
    {
        fieldName: '测试ElImgList1',
        fieldCode: "imgList1",
        fieldType: "ElImgList",
        isShowInTable: false
    },
    {
        fieldName: '测试默认赋值',
        fieldCode: "default",
        isDefaultValue: true
    },
]

const tableGridConfig = [{
    tableDataApi: 'api/tableData/get',
    deleteFunctionApi: 'api/tableData/delete',
    addFunctionApi: 'api/tableData/add',
    editFunctionApi: 'api/tableData/edit',
    uploadFileApi: 'api/file/upload',
    deleteFileApi: 'api/file/delete',
    fieldConfigs: fieldsConfig
}]

const fieldsConfig1: Array<fieldConfig> = [
    {
        fieldName: '测试number',
        fieldCode: "number",
        fieldType: "ElInput",
        fieldContentType: 'number',
        isQueryCondition: true
    },
    {
        fieldName: '测试float',
        fieldCode: "float",
        fieldType: "ElInput",
        fieldContentType: 'float'
    },
    {
        fieldName: '测试integer',
        fieldCode: "integer",
        fieldType: "ElInput",
        fieldContentType: 'integer'
    },
    {
        fieldName: '测试ElInput',
        fieldCode: "name",
        fieldType: "ElInput",
        isQueryCondition: true,
        isRequired: true
    },
    {
        fieldName: '测试ElInputPattern',
        fieldWidth: 200,
        fieldCode: "name1",
        fieldType: "ElInput",
        fieldPattern: /^[a-zA-Z0-9_-]{4,16}$/,
        isQueryCondition: true,
        // fieldRuleDescription: '以四个字母或数字开头，且长度不超过16'
    },
    {
        fieldName: '测试ElSwitch',
        fieldCode: "switch",
        fieldType: "ElSwitch"
    },
    {
        fieldName: '测试ElSelect',
        fieldCode: "select",
        fieldType: "ElSelect",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'select_DESC',
        isShowInTable: false,
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElCheckbox',
        fieldWidth: 200,
        fieldCode: "checkboxGroup",
        fieldType: "ElCheckboxGroup",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'checkboxGroup_DESC',
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElRadioGroup',
        fieldWidth: 200,
        fieldCode: "radioGroup",
        fieldType: "ElRadioGroup",
        optionDataApi: 'api/option/get', // 字段组件为select radio checkbox的选项数据获取地址
        translateFieldCode: 'radioGroup_DESC',
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElDatePicker',
        fieldCode: "datePicker",
        fieldType: "ElDatePicker",
        isQueryCondition: true,
    },
    {
        fieldName: '测试ElDateTimePicker',
        fieldWidth: 230,
        fieldCode: "dateTimePicker",
        fieldType: "ElDateTimePicker"
    },
    {
        fieldName: '测试ElTextarea',
        fieldWidth: 260,
        fieldCode: "textarea",
        fieldType: "ElTextarea"
    },
    {
        fieldName: '测试ElColorPicker',
        fieldCode: "color",
        fieldType: "ElColorPicker"
    },
    {
        fieldName: '测试ElUpload',
        fieldWidth: 120,
        fieldCode: "file",
        fieldType: "ElUpload",
        uploadAllowFile: '*',
        isShowInTable: false
    },
    {
        fieldName: '测试ElImgList',
        fieldCode: "imgList",
        fieldType: "ElImgList",
        isShowInTable: false
    },
]

const tableGridConfig1 = [{
    tableDataApi: 'api/tableData/get',
    deleteFunctionApi: 'api/tableData/delete',
    addFunctionApi: 'api/tableData/add',
    editFunctionApi: 'api/tableData/edit',
    uploadFileApi: 'api/file/upload',
    deleteFileApi: 'api/file/delete',
    fieldConfigs: fieldsConfig1
}]
</script>

<style lang="scss" scoped></style>
